<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片收藏</title>
	<style>
/*css初始化*/
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;/*去掉列表样式小点*/
		}

		.clearfix:before,.clearfix:after{/*三个清除浮动*/
			display: table;
			content: "";
		}
		.clearfix:after{
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}
		
		
		body{
			background-color: #ffffff;
		}
		a{
			text-decoration: none;/*取消下划线*/
			font-size: 20px
		}
/*		背景区*/
		header{
			height: 600px;
			background-color: pink;
			overflow: hidden;
			background:#DBD3D3 url(images/图片背景.jpg) center no-repeat;
		}
		.inheadbox{
			height: 42px;
			width: 1200px;
			background-color:rgba(255,255,255,0);
			margin: 26px auto 0;
		}
		.inheadbox a{
			font-family: "kaiti" ;
		}
		.inheadboxbar{
			float: right;/*设置导航栏右浮动*/
			height: 42px;
			line-height:42px;/*设置行高等于高，使导航栏里文字居中，行高给父，让li继承此父类，因为给父写了就不用给每个li写了*/
		}
		.inheadboxbar li{
			float: left;/*让1，2，3一行显示*/
		}
		.inheadboxbar li a{
			padding: 0 35px;/*上下0，左右25*/
			color:white;
			font-family: "kaiti" ;
		}
		
		.index{
			float: left;
			color:white;
			font-size: 20px;
			padding: 4px;
		}
		
/*		背景区里文字区*/
		.collection{
			height: 100px;
			width: 380px;
			background-color:rgba(255,255,255,0);
			margin: 140px 540px 0px 600px;
			font-size: 80px;
			color: white;
		}
		
		.fondme{
			height: 30px;
			width: 50px;
			background-color: rgba(255,255,255,0);
			float: left;
			margin: 0px 709px ;
			color:  white;
			font-size: 25px
		}
		.fondme a{
			color: white;
		}
/*自然风景区*/
		.naturalsay{
			
			height: 100px;
			background-color: #ffffff;

		}
		.naturalpicture{
			height: 750px;
			width: 1350px;
			margin: auto;
			background-color: #ffffff;
		}
		img{
			float: left;
		}
		.picture5{
			float: right;
		}
		p{
			margin-left:120px;
			line-height: 100px;
			color: #8C8788;
			font-family: "kaiti" ;
			font-size: 25px;
		}
	</style>
</head>

<body>
<!--	背景区-->
	<header>
		<div class="inheadbox">
			<a href="index.html" class="index">首页</a>
		    <div class="inheadboxbar">
			  <ul>
				<li><a href="登录.html">登录</a></li>
				<li><a href="l联系.html">联系</a></li>
				<li><a href="介绍.html">介绍</a></li>
			  </ul>
		    </div>
		</div>
		<!--	背景区里文字区-->
	    <div class="collection">picture</div>
	    <div class="fondme"><a href="个人中心.html">calin</a></div>
	</header>
<!--	自然风景区-->
	<div class="naturalsay"><p>山泉</p></div>
	<div class="naturalpicture"><img src="images/收藏图1.jpg" alt=""></div>
	<div class="naturalsay"><p>缥缈的美</p></div>
	<div class="naturalpicture"><img src="images/收藏图2.jpg" alt=""></div>
    <div class="naturalsay"><p>朝阳和晚霞</p></div>
	<div class="naturalpicture"><img src="images/收藏图4.jpg" alt=""><img class="picture5" src="images/收藏图5.PNG" alt=""></div>
	<div class="naturalsay"><p>一望无际的沙漠</p></div>
	<div class="naturalpicture"><img src="images/收藏图3.jpg" alt=""></div>
	<div class="naturalsay"></div>
</body>
</html>
